<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js方式实现3D效果</title>
    <link rel="stylesheet" href="D004_style.css">
</head>
<body>
<div class="container">
    <div id="carousel">
        <figure><img id="img1" src="" alt=""></figure>
        <figure><img id="img2" src="" alt=""></figure>
        <figure><img id="img3" src="" alt=""></figure>
        <figure><img id="img4" src="" alt=""></figure>
        <figure><img id="img5" src="" alt=""></figure>
        <figure><img id="img6" src="" alt=""></figure>
    </div>
</div>
<script>

    let int = 1;
    let imgs = document.getElementsByTagName('img')
    for (let img of imgs) {
        img.src = '../D000_Index/img/banhua' + int + '.png';
        console.log(
            img
        )
        int++
    }

    function picChange(e) {
        console.info(e)
    }

    function picStart() {

        let pics = document.getElementsByClassName("pic");
        let int = 1;
        for (let pic of pics) {
            for (let img of imgs) {
                if ((img.id == 'img' + int) && (pic.id == "pic" + int)) {
                    img.src = '../D000_Index/img/banhua' + int + '.png';
                }

            }
        }
    }


</script>
</body>
</html>